<template>
  <div style="height: 100%">
    <header class="header">
      <div class="title">
        <img src="@/assets/images/01_11.png" alt="" class="img_zuo" @click="clickBack" />
        <div>{{ name }}巡查排查</div>
        <div class="btn-add">
          <img src="@/assets/images/01_05.png" @click="shows = true"/>
        </div>
        <div class="btn-search">
          <img
            src="@/assets/images/big.png"
            @click="querySearch()"/>
        </div>
      </div>
    </header>
    <div class="menPhis-main titles">
      <div class="column-box">
        <div class="column-box-title">
          <img src="@/assets/images/run.png" alt="" style="width: 0.4rem;height: auto">
          <span style="margin-left: 5px;font-size: 0.4444rem;font-weight: 400;">巡查排查总数{{ count }}次</span>
        </div>
        <div class="column-box-title">
          <img src="@/assets/images/appa_r.png" class="img img-ts" @click="clickDate(1)">
          <div class="column-box-title" @click="show === false ? show = true : show = false">
            <span style="margin-left: 5px" :style="timeType === 1 ? 'margin-right: 5px' : ''">{{ years }}</span>
            <span v-if="timeType === 2" :style="timeType === 2 ? 'margin-right: 5px' : ''">.{{ year }}</span>
            <img src="@/assets/images/app_x.png" class="imgs">
          </div>
          <img src="@/assets/images/appa_r.png" class="img" @click="clickDate(2)">
        </div>
      </div>
      <patrol
        :cookie="cookie"
        :brokenLine="brokenLine"
        :date="date"
        :dataList="dataList"
        @jump="jump"
        @jumpList="jumpList">
      </patrol>
      <div class="titles-modal" v-if="show" @click="show = false">
        <div class="titles-box">
          <div class="titles-tu"></div>
          <div class="titles-text" @click="clickBounceds(1)">年</div>
          <div class="titles-text" @click="clickBounceds(2)">月</div>
        </div>
      </div>
      <div class="titles-modal" v-if="shows" @click="shows = false"></div>
      <div class="titles-box titles-boxs" style="z-index: 1000" v-if="shows !== false">
        <div class="titles-tu"></div>
        <div class="titles-text-box">
          <!-- <div class="titles-text" @click="jumpType(3)">普通</div> -->
          <div class="titles-text" @click="jumpType(1)">扫一扫</div>
          <div class="titles-text" @click="jumpType(2)">非固定点</div>
<!--          <div-->
<!--            class="titles-text"-->
<!--            @click="jumpType(item)"-->
<!--            v-for="(item, index) in propagandaType"-->
<!--            :key="index">{{ item.mc }}</div>-->
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import patrol from './field';
import Field from '../Propaganda/field';
import terminal from '@/assets/js/terminal';
export default {
  data () {
    return {
      column: [],
      cookie: [],
      columns: [],
      dates: [],
      brokenLine: [],
      date: [],
      dataList: [],
      propagandaType: [],
      userInfoData: {},
      show: false,
      shows: false,
      year: new Date().getMonth() + 1,
      years: new Date().getUTCFullYear(),
      userId: '',
      chooseId: 0,
      count: 0,
      timeType: 1,
      permissions: 0,
      Type: 0,
      name: ''
    };
  },
  components: {
    Field,
    patrol
  },
  mounted() {
    this.userId = localStorage.getItem('userId');
    document.body.style.overflowY = 'auto';
    this.userInfoData = JSON.parse(localStorage.getItem('subordinateData1'));
    let a = JSON.parse(sessionStorage.getItem('time'))
    if (a) {
      this.year = Number(a.year);
      this.years = Number(a.years);
      this.timeType = Number(a.timeType);
      this.chooseId = Number(a.chooseId);
      // if (a.type) {
      //   this.Type = Number(a.type);
      // }
    }
    this.queryAll();
  },
  methods: {
    //  跳转搜索查询
    querySearch () {
      this.saveTime();
      this.$router.push({
        path: '/patrol_query'
      })
    },
    queryAll () {
      let that = this;
      terminal.Start();
      let params = {
        userId: that.userId,
        dwId: that.userInfoData.id,
        year: that.years,
      };
      if (that.Type !== 0) {
        params.type = that.Type
      }
      if (that.timeType !== 1) {
        params.month = that.year
      }
      this.empty();
      this.queryCookie(params);
      this.queryLine(params);
      this.queryList(params);
      terminal.end()
    },
    //  存日期
    saveTime (id) {
      let time = {
        year: this.year,
        years: this.years,
        chooseId: this.chooseId,
        timeType: this.timeType,
        dwId: this.userInfoData.id,
        path: '/index_communityS'
      };
      if (id) {
        time.type = id
      }
      sessionStorage.setItem('time', JSON.stringify(time))
    },
    //  饼状图跳转列表
    jumpList (item) {
      let time = {
        year: this.year,
        years: this.years,
        chooseId: this.chooseId,
        timeType: this.timeType,
        path: '/index_communityS',
        dwId: this.userInfoData.id,
        bigClass: item.id
      };
      sessionStorage.setItem('time', JSON.stringify(time));
      this.$router.push({
        path: '/statistical_lists'
      })
    },
    //  跳转下级
    jump (data) {
      let router,item;
      data.path = '/index_communityS';
      if (data.name.indexOf('本级') !== -1) {
        this.saveTime(2);
      } else {
        this.saveTime();
      }
      router = '/index_thisLevels';
      item = 'subordinateData2';
      localStorage.setItem(item, JSON.stringify(data));
      this.$router.push({
        path: router
      })
    },
    jumps (data) {
      this.jumpQuery(this.userInfoData.dwid, this.userInfoData.lev,
        '/statistical_list', data.adduserid, this.dateFormat, 1)
    },
    //  切换部门
    jumpDepartment () {
      this.chooseId = this.chooseId === 0 ? 1 : 0;
      this.count = 0;
      this.queryAll();
    },
    //  跳转查询页
    jumpQuery (id, index, path, column, time, ids) {
      let query;
      if (this.chooseId === 1) {
        if (this.userInfoData.dwlxid === 1) {
          query = { dwId: id, lev: index, path: '/statistical', column, time, dwlxid: this.userInfoData.dwlxid };
        } else if (this.userInfoData.dwlxid === 4 || this.userInfoData.dwlxid === 5) {
          query = { dwId: id, lev: index, path: '/statistical', column, time, ids };
        } else {
          query = { dwId: id, lev: index, path: '/statistical', column, time };
        }
      } else {
        query = { dwId: id, lev: index, path: '/statistical', column, time, chooseId: this.chooseId };
      }
      sessionStorage.setItem('query', JSON.stringify(query));
      this.saveTime();
      this.$router.push({
        path: path
      })
    },
    //  跳转巡查排查添加页
    jumpType (id) {
      this.saveTime();
      localStorage.setItem('xcpc_scan_fanhui',"/index_communityS");
      switch (id) {
        case 1:
          sessionStorage.removeItem('qujiname');
          sessionStorage.removeItem('jiedaoname');
          sessionStorage.removeItem('shequname');
          sessionStorage.removeItem('number');
          sessionStorage.removeItem('yeschuan');
          sessionStorage.removeItem('str');
          sessionStorage.removeItem('fidname');
          sessionStorage.removeItem('didname');
          localStorage.removeItem("xcpc_da_obj");
          localStorage.removeItem('xcdx_map_xcdxObj');
          this.$router.push("/xcpc_scan");
          break;
        case 2:
          localStorage.removeItem('param_fgd');
          localStorage.removeItem('xcdx_map_xcdxObj');
          localStorage.removeItem("xcpc_da_obj");
          this.$router.push("/feiguding");
          break;
        case 3:
          localStorage.removeItem('communityData');
          localStorage.removeItem('MapPosResult');
          localStorage.removeItem('MapPosObj');
          localStorage.removeItem('ordinary_inspection');
          localStorage.removeItem('responseText');
          this.$router.push({
            path: '/ordinary_inspection'
          });
          break;
      }
    },
    //  返回首页
    clickBack () {
      this.$router.back();
      // this.$router.push({
      //   path: this.userInfoData.path
      // });
    },
    //  选择时间弹框
    clickBounceds (id) {
      this.show = false;
      this.count = 0;
      switch (id) {
        case 1:
          this.timeType = 1;
          break;
        case 2:
          this.timeType = 2;
          break;
      }
      this.queryAll()
    },
    //  减少/增加月份或年份
    clickDate (id) {
      let that = this;
      if (id === 1) {
        switch (that.timeType) {
          case 1:
            if (that.years > 2015) {
              that.years--;
              that.queryAll();
            }
            break;
          case 2:
            if (that.years > 2015) {
              that.year--;
              if (that.year <= 0) {
                that.years--;
                that.year = 12;
              }
              that.queryAll();
            } else {
              if (this.year > 1) {
                that.year--;
                that.queryAll();
              }
            }
            break;
        }
      } else {
        switch (that.timeType) {
          case 1:
            if (that.years < new Date().getUTCFullYear()) {
              that.years++;
              that.queryAll();
            }
            break;
          case 2:
            if (that.years < new Date().getUTCFullYear()) {
              if (that.year >= 12) {
                that.year++;
                that.years++;
                that.year = 1;
              } else {
                that.year++;
              }
              that.queryAll();
            } else {
              if (that.year !== new Date().getMonth() + 1) {
                that.year++;
                that.queryAll();
              }
            }
            break;
        }
      }
    },
    //  清空数据
    empty () {
      this.columns = [];
      this.dates = [];
      this.brokenLine = [];
      this.date = [];
      this.dataList = [];
    },
    //  统计图传参
    statisticalGinseng (data) {
      let that = this;
      let b = that.timeType === 1 ? new Date().getMonth() + 1: that.year;
      let aList = [];
      if (that.timeType === 1) {
        for (let i = 1;i < 13; i++) {
          that.date.push(`${i}月`);
          aList.push(0);
          data.map(item => {
            if (item.time === i) {
              aList[i - 1] = item.num;
            }
          })
        }
      } else {
        for (let i = 1;i < terminal.getDaysInMonth(b.toString(), that.years) + 1; i++) {
          that.date.push(`${i}日`);
          aList.push(0);
          data.map(item => {
            if (i === item.time) {
              aList[i - 1] = item.num;
            }
          })
        }
      }
      return aList
    },
    // 饼状图数据
    queryCookie (params) {
      let that = this;
      that.axios.get(`${that.$global_msg.Url.host}/partroInspection/piechart`,
        { params }).then( res => {
          if (res.data.code === 200) {
            that.cookie = res.data.rows.pie;
            that.count = res.data.rows.total;
            that.name = res.data.rows.name;
          }
      }).catch( e => terminal._error(e));
    },
    // 折线图数据
    queryLine (params) {
      let that = this;
      that.axios.get(`${that.$global_msg.Url.host}/partroInspection/linechart`,
        { params }).then( res => {
        if (res.data.code === 200) {
          that.brokenLine = this.statisticalGinseng(res.data.rows);
        }
      }).catch( e => terminal._error(e));
    },
    // 列表数据
    queryList (params) {
      let that = this;
      that.axios.get(`${that.$global_msg.Url.host}/partroInspection/statisticslist`,
        { params }).then( res => {
        if (res.data.code === 200) {
          that.dataList = res.data.rows;
          // that.dataList = res.data.rows.reverse();
        }
      }).catch( e => terminal._error(e));
    }
  },
  watch: {
    show () {
      document.body.style.overflowY = document.body.style.overflowY === 'hidden' ? 'auto' : 'hidden';
    },
    shows () {
      document.body.style.overflowY = document.body.style.overflowY === 'hidden' ? 'auto' : 'hidden';
    }
  }
}
</script>
<style scoped>
  @import '../Propaganda/index.css';
</style>
